<template>
    <div>
        <mt-header title="查询玩家">
            <router-link to="/" slot="left">
                <i class="mintui mintui-back lic-d"></i>
            </router-link>
        </mt-header>
        <!-- 搜索框 -->
        <div class="search">
            <input type="text" placeholder="请输入玩家ID" v-model="userId">
            <span class="mint-toast-icon mintui mintui-search dwicon" @touchend='getuserId'></span>
        </div>
        <div class="daili" @touchend='getselectUsers(1)'>查询所有</div>
        <div class="list" v-for="(item,i) in selectUsersdata" :key="i">
            <div class="left">
                <p>ID:<span>{{item.userId}}</span></p>
                <p>房卡:<span>{{item.gems}}</span></p>
            </div>
            <div class="right">
                <p>昵称：<span>{{item.name}}</span></p>
            </div>
        </div>


        <div class="one">
            <div @touchend='pagingreduce' class="shang">上一页</div>
            <div @touchend='pagingplus' class="xia">下一页</div>
        </div>
    </div>
</template>

<script>
    import {
        selectUsers,
        userId
    } from '../api/api'
    import {
        Toast
    } from 'mint-ui';
    export default {
        data() {
            return {
                selectUsersdata: [],
                page: '1',
                length: '',
                userId: '',
            }
        },
        created() {
            this.getselectUsers(this.page)
        },
        methods: {
            getselectUsers(page) { //获取所以数据
                selectUsers(page).then(res => {
                    if (res.data.code == 1) {
                        this.selectUsersdata = res.data.data.users;
                        this.length = res.data.data.totalPage
                        //  console.log(res.data.data,1222)
                    }
                })
            },
            getuserId() {
                userId(this.userId).then(res => {
                    if (res.data.code == 1) {
                        this.selectUsersdata = res.data.data
                    }else{
                        Toast('没有该玩家');
                    }
                })
            },
            pagingplus() {
                if (this.page < this.length) {
                    this.page++;
                    this.getselectUsers(this.page)
                } else {
                    Toast('已经是最后一页了');
                }
            },
            pagingreduce() {
                if (this.page > 1) {
                    this.page--;
                    this.getselectUsers(this.page)
                    //   console.log(this.pape)
                } else {
                    Toast('已经是第一页了');
                }
            }
        }
    }
</script>



<style scoped lang="less">
    a {
        text-decoration: none;
    }
    .lic-d {
        font-size: 50px;
    }
    .mint-header {
        background: -webkit-linear-gradient(left, #6180F4, #79CBFA);
        font-size: 36px;
        height: 80px;
    }
    .search {
        width: 100%;
        height: 90px;
        box-sizing: border-box;
        padding: 12px 54px;
        position: relative;
        input {
             width: 100%;
            height: 100%;
            padding-left: 20px;
            background-color: #F4F4F4;
            border: none;
            border-radius: 10px;
            outline: none;
            border-bottom: 2px solid #cccccc;
            border-top: 2px solid #cccccc;
            border-left: 2px solid #cccccc;
        }
        .dwicon {
           position: absolute;
            top: 14px;
            right: 56px;
            height: 60px;
            line-height: 60px;
            width: 100px;
            color: #fff;
            font-size: 40px;
            color: #000;
            border-radius: 10px;
            border-left: 2px solid #cccccc;
            border-right: 2px solid #cccccc;
        }
    }
    .daili {
       width: 400px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border-radius: 10px;
        margin: 20px auto;
        font-size: 32px;
        border: 2px solid #cccccc;
        background-color: #DEE0E0;
        box-shadow: 0px 2px 4px rgba(34, 25, 25, 0.2);
        color: #000;
    }
    .list {
        height: 108px;
        margin-top: 20px;
        border: 2px solid #cccccc;
        margin: 10px 10px 0;
        color: #949494;
        border-radius: 10px;
        background-color: #fff;
        position: relative;
        p {
            margin: 0;
            padding: 0;
            font-size: 28px;
        }
        .left {
            float: left;
            padding-left: 20px; 
            p{
                margin: 10px;
            }
        }
        .right {
            float: right;
            padding-right: 20px;
            margin: 10px;
        }
        .dingwe {
            width: 60px;
            height: 60px;
            position: absolute;
            right: 4px;
            top: 24px;
            font-size: 24px;
        }
    }
    .one {
        height: 60px;
        margin: 10px 10px 0; 
        text-align: center;
        line-height: 60px;
        font-size: 28px;
        margin-top: 10px;
        margin-bottom: 0;
    }
    .shang {
        width: 350px;
        float: left;
        border: 2px solid #cccccc;
        border-radius: 25px;
        background-color: #DEE0E0;
    }
    .xia {
        width: 350px;
        float: right;
        border-radius: 25px;
        border: 2px solid #cccccc;
        background-color: #DEE0E0;
    }
    input::-webkit-input-placeholder {
        font-size: 28px;
        padding-left: 10px;
        color: #ccc;
    }
</style>
